<script setup lang="ts">
const useSystemStore = systemStore()
const base = import.meta.env.VITE_BASE_URL

const iconSrc = computed(() => `${base}${useSystemStore.logoPath}`)

export interface FreeUseButtonProps {
  // 是否大按钮
  large?: boolean
}
withDefaults(defineProps<FreeUseButtonProps>(), {
  large: false
})
</script>

<template>
  <a-link href="/" :hoverable="false" class="app-logo__wrapper">
    <!-- <i-app-logo :class="['app-logo', { 'is-large': large }]" /> -->
    <img :src="iconSrc" alt="" :class="['app-logo', { 'is-large': large }]" />
    <div :class="['title-wrapper', { 'is-large': large }]">
      <span class="title">{{ useSystemStore.title ?? APP_TITLE }}</span>
      <span class="subtitle">{{ APP_SUB_TITLE }}</span>
    </div>
  </a-link>
</template>

<style scoped lang="less">
.app-logo__wrapper {
  @apply inline-flex items-center;
  .app-logo {
    @apply w-6 h-6;
    &.is-large {
      @apply w-12 h-12;
    }
  }
  .title-wrapper {
    @apply flex flex-col items-start gap-2 pl-4;
    .title {
      color: #41464f;
      font-family: YouSheBiaoTiHei;
      font-size: 24px;
      font-weight: 400;
    }
    .subtitle {
      color: #80838a;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 18px; /* 128.571% */
      display: none;
    }
    &.is-large {
      .title {
        line-height: 24px;
      }
      .subtitle {
        display: block;
      }
    }
  }
}
</style>
